<template>
  <q-page class="q-pa-md markWrapBox" v-loading="loading">
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <el-image src="/svgs/publicMark.svg" style="width: 17px;margin-top: 2px" fit />
        </el-breadcrumb-item>
        <el-breadcrumb-item>算法服务</el-breadcrumb-item>
        <el-breadcrumb-item><span style=" color: #333;">公开市场</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="markContentBox" style="position: relative" v-if="tableData.results.length > 0">
      <div class="contentBox_title">公开市场</div>
      <div class="contentBox">
        <div class="box-card" v-for=" (item, index) in tableData.results" :key="index">
          <div class="row">
            <div class="leftBox">
              <div class="imgBox">
                <el-image :src="marketIcon" fit="contain" />
              </div>
            </div>
            <div class="rightBox">
              <div class="subscribe" size="samll" type="primary" plain @click="subscribe(item.id, !item.is_subscription)"
                v-if="!item.is_subscription">订阅</div>
              <div class="subscribe isSubscribe" size="samll" type="primary" plain
                @click="subscribe(item.id, !item.is_subscription)" v-else>已订阅</div>
              <div class="title">{{ item.title }}</div>
              <div class="description">{{ item.description }}</div>
              <div class="row justify-between bottomMessage">
                <div class="col col-10">
                  <div class="row leftMes">
                    <div>发布人：{{ item.create_by }}</div>
                    <div>发布时间：{{ item.public_time }}</div>
                  </div>
                </div>
                <div class="rightMes">订阅数：<span style="color: #333333;">{{ item.subscription_count }}</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <deleteDialog ref="deleteDialogRef" @submit="handleSubmit" :content="message" :title="title"
      :colorStyle="{ color: '#FFA940' }"></deleteDialog>
      <div class="row" style="justify-content: end;margin-top: 10px;background-color: #fff;padding: 10px 0 "
          v-if="tableData.results.length > 0">
          <el-pagination background layout="prev, pager, next, sizes, jumper" :page-sizes="[10, 20, 50]"
            :total="tableData.count" v-model:current-page="pageDataValue.page"
            v-model:page-size="pageDataValue.page_size"  @size-change="sizeChange"
            @current-change="changePage" />
        </div>
  </q-page>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from 'vue-router';
import { dataSetStore } from 'src/stores/dataSet'
import { getMarket, subscription, unSubscription } from 'src/api/market'
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus'
import marketIcon from 'assets/market/marketIcon.png'
import deleteDialog from 'components/delDialog.vue'
let deleteDialogRef = ref()
let idData = ref(0);
let eventHandle = ref<any>(null)
let message = ref('确定订阅该算法吗?');
let title = ref('算法订阅');
const pageDataValue = ref({
  page: 1,
  page_size: 10
})
const store = dataSetStore()
const router = useRouter()
const projectId = router.currentRoute.value.params.project_id
let tableData = ref(
  {
    count: 0,
    next: "",
    previous: "",
    results: <any>[]
  }
)
const loading = ref(false)
getMarketData()
function getMarketData() {
  loading.value = true
  let obj: any = {}
  obj = Object.assign(obj, pageDataValue.value);
  getMarket(projectId,obj).then((res: any) => {
    tableData.value = res.data
    loading.value = false
  }).catch(error => {
    console.log(error)
    loading.value = false
  })
}
function handleSubmit() {
  eventHandle.value();
}
function subscriptionHandle() {
  subscription(projectId, idData.value).then(() => {
    ElMessage.success('算法订阅成功')
    getMarketData()
  }).catch((error) => {
    console.log(error)
  })
}

function unSubscriptionHandle() {
  unSubscription(projectId, idData.value).then(() => {
    ElMessage.success('取消订阅成功')
    getMarketData()
  }).catch((error) => {
    console.log(error)
  })
}

// 订阅/取消
function subscribe(id: number, type: boolean) {
  deleteDialogRef.value.show();
  message.value = type ? '确定订阅该算法吗?' : '确定取消订阅该算法吗?';
  title.value = type ? '算法订阅?' : '取消算法订阅?';
  idData.value = id;
  if (type) {
    eventHandle.value = subscriptionHandle
  } else {
    eventHandle.value = unSubscriptionHandle
  }
}
function sizeChange(pageSize: any) {
  pageDataValue.value.page_size = pageSize
  pageDataValue.value.page = 1;
  getMarketData();
}

function changePage(currentPage: any) {
  pageDataValue.value.page = currentPage;
  getMarketData()
}

</script>

<style scoped lang="scss">
.markWrapBox {
  padding: 0 !important;

  .nav {
    display: flex;
    align-items: center;
    padding-left: 20px;
    cursor: pointer;
    background-color: var(--nav-bg-color);
    height: 46px;

    ::v-deep .el-breadcrumb {
      display: flex;
      align-items: center;
    }
  }

  .markContentBox {
    margin: 0 20px;

    .contentBox_title {
      color: var(--title);
      font-weight: 500;
      font-size: 16px;
      padding: 15px 15px;
      border-bottom: 1px solid #e5e6eb;
      background-color: #ffffff !important;
    }

    .contentBox {
      padding: 12px;
      background-color: #ffffff !important;

      .box-card {
        padding: 20px;
        border-radius: 12px;
        background: #F4F6FD;
        margin-bottom: 20px;
      }

      .leftBox {
        margin-right: 20px;

        .imgBox {
          width: 120px;
          height: 110px;
          background: #e9e9e9;
          border-radius: 4px;
        }
      }

      .rightBox {
        width: calc(100% - 140px);
        position: relative;

        .subscribe {
          color: #3D5CE4;
          border: 1px solid #3D5CE4;
          position: absolute;
          right: 0;
          top: 0;
          padding: 4px 25px;
          border-radius: 2px;
          user-select: none;
          font-size: 14px;
          cursor: pointer;

          &:hover {
            background: hsl(228, 95%, 93%);
          }
        }

        .isSubscribe {
          color: #999999;
          border: 1px solid #999999;

          &:hover {
            background: #efefef;
          }
        }

        .title {
          color: #333333;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: 22px;
          margin-bottom: 5px;
        }

        .description {
          color: #666666e6;
          font-family: "PingFang SC";
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: 18px;
        }

        .bottomMessage {
          position: absolute;
          bottom: 0;
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: 18px;
          width: 100%;

          .leftMes {
            color: #333333;

            div {
              &:first-child {
                margin-right: 10px;
              }
            }
          }

          .rightMex {
            color: #666666e6;
          }
        }
      }
    }
  }
}
</style>
